<!DOCTYPE html>
<html>
<head>
    <title>主页</title>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
    
    <link rel="stylesheet" href="${request.contextPath}/statics/bootstrap/css/bootstrap.css">
    
    <script src="${request.contextPath}/statics/plugins/jquery/jquery-3.3.1.min.js"></script>
    <script src="${request.contextPath}/statics/bootstrap/js/bootstrap.js"></script>
    <script src="${request.contextPath}/statics/plugins/vue/vue.js"></script>
    <script src="${request.contextPath}/statics/js/util.js"></script>
    
    <style type="text/css">
    	.sloth-table {
    		
    	}
    	.sloth-table > thead > tr > th {
    		text-align: center;
    		vertical-align: middle;
    	}
    	.sloth-table > tbody > tr > td {
    		text-align: center;
    		vertical-align: middle;
    	}
    	
        .center {
            text-align: center;
        }
        .middle {
            vertical-align: middle;
        }
        .deal-status-click:hover, .msg-log-dtl:hover {
            text-decoration: underline;
            font-weight: bolder;
            color: blue;
            cursor: pointer;
        }
    </style>
</head>
<body>
<div id="slothMain" v-cloak style="margin: 30px 50px 30px 50px;">
    <div class="row" style="margin-bottom: 10px;">
	    <form class="form-horizontal" style="width: auto;">
            <div class="form-group col-md-2">
                <label class="control-label">消息实时处理进度</label>
            </div>
	        <div class="form-group col-md-2" style="background-color: #f5f5f5;">
	            <label class="col-sm-6 control-label">待处理：</label>
	            <div class="col-sm-6 deal-status-click" v-on:click="goToListOfDealStatus(1)">
                    <p class="form-control-static">{{util.isEmpty(msgStatusCount.new) ? "-" : msgStatusCount.new}} 条</p>
                </div>
	        </div>
	        <div class="form-group col-md-2" style="background-color: #fcf8e3;">
                <label class="col-sm-6 control-label">处理中：</label>
                <div class="col-sm-6 deal-status-click" v-on:click="goToListOfDealStatus(2)">
                    <p class="form-control-static">{{util.isEmpty(msgStatusCount.executing) ? "-" : msgStatusCount.executing}} 条</p>
                </div>
            </div>
            <div class="form-group col-md-2" style="background-color: #dff0d8;">
                <label class="col-sm-6 control-label">成功：</label>
                <div class="col-sm-6 deal-status-click" v-on:click="goToListOfDealStatus(3)">
                    <p class="form-control-static">{{util.isEmpty(msgStatusCount.success) ? "-" : msgStatusCount.success}} 条</p>
                </div>
            </div>
            <div class="form-group col-md-2" style="background-color: #f2dede;">
                <label class="col-sm-6 control-label">失败：</label>
                <div class="col-sm-6 deal-status-click" v-on:click="goToListOfDealStatus(4)">
                    <p class="form-control-static">{{util.isEmpty(msgStatusCount.fail) ? "-" : msgStatusCount.fail}} 条</p>
                </div>
            </div>
            <div class="form-group col-md-2">
                <label class="col-sm-6 control-label">刷新间隔</label>
                <div class="col-sm-6">
                    <select class="form-control" v-model="refreshTime">
                        <option value="1">1S</option>
                        <option value="5">5S</option>
                        <option value="10">10S</option>
                        <option value="15">15S</option>
                        <option value="20">20S</option>
                        <option value="30">30S</option>
                        <option value="60">60S</option>
                    </select>
                </div>
            </div>
            <button type="button" class="btn btn-primary" v-on:click="clearAllMsgLog()">清空所有日志</button>
	    </form>
    </div>
    <div class="row" style="margin-bottom: 10px;">
    	<table class="table table-bordered sloth-table">
			<thead>
                <tr>
					<th>序号</th>
					<th>消息队列名</th>
					<th>操作</th>
				</tr>
            </thead>
            <tbody>
				<tr v-if="queueData.length == 0"><td colspan="3">暂无消息队列数据</td></tr>
				<tr v-if="queueData.length != 0" v-for="(item, index) in queueData">
					<td>{{index + 1}}</td>
					<td>{{item}}</td>
					<td>
						<button type="button" class="btn btn-primary" @click="clearMsgQueue(item)">清除</button>
					</td>
				</tr>
            </tbody>
        </table>
    </div>
    <div class="row" style="margin-bottom: 10px;">
    	<table class="table table-bordered sloth-table">
			<thead>
                <tr>
					<th>序号</th>
					<th>消息队列名</th>
					<th>消息type</th>
				</tr>
            </thead>
            <tbody>
				<tr v-if="queue2TypeData.length == 0"><td colspan="3">暂无数据</td></tr>
				<template v-if="queue2TypeData.length != 0" v-for="(item, key, index) in queue2TypeData">
					<tr v-for="(typeItem, typeIndex) in item">
						<template v-if="typeIndex == 0">
							<td :rowspan="item.length">{{index + 1}}</td>
							<td :rowspan="item.length">{{key}}</td>
						</template>
						<td>{{typeItem}}</td>
					</tr>
				</template>
            </tbody>
        </table>
    </div>
    <div class="row">
		<table class="table table-bordered sloth-table">
			<thead>
				<tr>
					<th>ID</th>
					<th>消息类型</th>
					<th>消息创建时间</th>
					<th>消息处理时间</th>
					<th>消息处理耗时(s)</th>
					<th>是否同步消息</th>
					<th>是否单应用消息</th>
					<th>消息处理队列</th>
					<th>消息处理状态</th>
					<th>失败原因</th>
				</tr>
			</thead>
			<tbody>
				<tr v-if="msgLogData.length == 0"><td colspan="10">暂无消息日志数据</td></tr>
				<tr v-if="msgLogData.length != 0" v-for="item in msgLogData" :class="getRowClass(item.dealStatus)">
					<td class="msg-log-dtl" v-on:click="goToMsgLogDtl(item.id)">{{item.id}}</td>
					<td class="center">{{item.type}}</td>
					<td class="center">{{util.formatMillisec(item.timeStamp, "yyyy-MM-dd hh:mm:ss")}}</td>
					<td class="center">{{util.formatMillisec(item.updatedTime, "yyyy-MM-dd hh:mm:ss")}}</td>
					<td class="center">{{(item.updatedTime-item.timeStamp)/1000}}</td>
					<td class="center">{{item.sync ? "是" : "否"}}</td>
					<td class="center">{{item.single ? "是" : "否"}}</td>
					<td>{{item.queueName}}</td>
					<td class="center">{{getDealStatusWord(item.dealStatus)}}</td>
					<td>{{item.errorMsg}}</td>
				</tr>
			</tbody>
		</table>
    </div>
    <div class="row">
        <form class="form-horizontal" style="width: auto;">
            <div class="form-group">
                <label class="col-sm-1 control-label">当前时间</label>
                <div class="col-sm-11">
                    <p class="form-control-static">{{util.formatDateTime(currentTime, "yyyy-MM-dd hh:mm:ss")}}</p>
                </div>
            </div>
        </form>
    </div>
</div>
<script src="${request.contextPath}/statics/js/main.js?_${.now?long}"></script>
</body>
</html>